'use client'
import Card from '../../components/Card/index'
import Image from 'next/image'
import { useEffect } from 'react'
import { Col, Divider, Row, Tag, Timeline, message } from 'antd'
import './style.scss'
import { info, personalTags, projectProgress } from './dataSet'

const Divider2xl = (props) => {
  const { children } = props
  return (
    <Divider {...props} orientation="left">
      <p className="text-size-2xl">{children}</p>
    </Divider>
  )
}

const TransparentTag = ({ children }) => (
  <Tag color="#55acee" className="bg-[rgba(149,147,147,0.4)]!">
    {children}
  </Tag>
)

const HomeBody = ({ children }) => {
  const [messageApi, contextHolder] = message.useMessage()
  // 去新的星球
  const toNewStar = (e, type) => {
    e.preventDefault()
    if (type === 'AiKan') {
      window.open('https://www.92kyy.com/')
    } else if (type === 'WuDi') {
      window.open('https://gitee.com/lu147721/wu-di-student-manage')
    } else if (type === 'JingTan') {
      window.open('https://gitee.com/lu147721/jingtan')
    } else if (type === 'Blog') {
      window.open('http://localhost:4000')
    } else {
      messageApi.open({
        type: 'info',
        content: '敬请期待 ···',
      })
    }
  }

  useEffect(() => {}, [])
  return (
    <div className="p-15px flex justify-between">
      <div className="w-200px">
        <Col span={24}>
          {/* info */}
          <Card>
            {Object.keys(info).map((key) => {
              return (
                <p key={key} className="text-center">
                  {info[key]}
                </p>
              )
            })}
          </Card>
        </Col>
        {/* personalTags */}
        <Col span={24} className="mt-15px">
          <Card>
            {personalTags.map((tag) => (
              <TransparentTag key={tag}>{tag}</TransparentTag>
            ))}
          </Card>
        </Col>
        {/* 时间线 */}
        <Col span={24} className="mt-15px">
          <Card>
            <Timeline items={projectProgress} />
          </Card>
        </Col>
      </div>
      <div className="w-940px topic">
        {/* Commit */}
        <Divider2xl orientation="left">Commit</Divider2xl>
        <Row gutter={16} span={24}>
          <Image className="v-middle" width={960} height={200} src="/svg/snake-Light.svg" alt="" />
        </Row>
        {/* Correlation */}
        <Divider2xl orientation="left">Correlation</Divider2xl>
        {contextHolder}
        <Row gutter={16} span={24}>
          <Col className="mb-16px cursor-pointer" span={8}>
            <Card hover="true" onClick={(e) => toNewStar(e, 'Blog')}>
              <div className="flex">
                <Image className="v-middle" width={55} height={55} src="/download/incon/zhishiku.svg" alt="zhishiku" />
                <div className="pl-15px">
                  <h4>Blog</h4>
                  <p className="text-size-14px">前段之驴的小记</p>
                </div>
              </div>
            </Card>
          </Col>
          <Col className="mb-16px cursor-pointer" span={8}>
            <Card hover="true" onClick={(e) => toNewStar(e, 'AiKan')}>
              <div className="flex">
                <Image
                  className="v-middle"
                  width={55}
                  height={55}
                  src="/download/incon/电视-copy.svg"
                  alt="电视-copy"
                />
                <div className="pl-15px">
                  <h4>AiKan</h4>
                  <p className="text-size-14px">免费看电视</p>
                </div>
              </div>
            </Card>
          </Col>
          <Col className="mb-16px cursor-pointer" span={8}>
            <Card hover="true" onClick={(e) => toNewStar(e, 'Laboratory')}>
              <div className="flex">
                <Image className="v-middle" width={55} height={55} src="/download/incon/fengche.svg" alt="fengche" />
                <div className="pl-15px">
                  <h4>Laboratory</h4>
                  <p className="text-size-14px">一些有趣的demo</p>
                </div>
              </div>
            </Card>
          </Col>
        </Row>
        {/* Correlation */}
        <Divider2xl orientation="left">Periphery</Divider2xl>
        <Row gutter={16} span={24}>
          <Col className="mb-16px cursor-pointer" span={8}>
            <Card hover="true" onClick={(e) => toNewStar(e, 'WuDi')}>
              <div className="flex">
                <Image className="v-middle" width={55} height={55} src="/download/incon/wenjian.svg" alt="album" />
                <div className="pl-15px">
                  <h4>WuDi Maagement</h4>
                  <p className="text-size-14px">大学的一次课设</p>
                </div>
              </div>
            </Card>
          </Col>
          <Col className="mb-16px cursor-pointer" span={8}>
            <Card hover="true" onClick={(e) => toNewStar(e, 'Album')}>
              <div className="flex">
                <Image
                  className="v-middle"
                  width={55}
                  height={55}
                  src="/download/incon/相机-copy.svg"
                  alt="相机-copy"
                />
                <div className="pl-15px">
                  <h4>Album</h4>
                  <p className="text-size-14px">简单收集一些图片</p>
                </div>
              </div>
            </Card>
          </Col>
          <Col className="mb-16px cursor-pointer" span={8}>
            <Card hover="true" onClick={(e) => toNewStar(e, 'JingTan')}>
              <div className="flex">
                <Image
                  className="v-middle"
                  width={55}
                  height={55}
                  src="/download/incon/蓝鲸-copy.svg"
                  alt="蓝鲸-copy"
                />
                <div className="pl-15px">
                  <h4>鲸探</h4>
                  <p className="text-size-14px">参考鲸探app开发</p>
                </div>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  )
}

export default HomeBody
